<template>
  <a-modal 
    :title="title" 
    :width="800" 
    :visible="visible" 
    :confirm-loading="confirmLoading" 
    cancel-text="关闭" 
    @ok="submit" 
    @cancel="closeModal"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="分类级别">
          <a-radio-group v-model="isFirst" :default-value="0" name="isFirst">
            <a-radio :value="0">首级类目</a-radio>
            <a-radio :value="1">次级类目</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="类目名称">
          <a-input v-decorator="['name', validatorRules.val ]" placeholder="请输入类目名称" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="上级类目" v-if="isFirst">
          <a-tree-select
            v-decorator="['pid', validatorRules.val ]"
            style="width: 100%"
            :tree-data="treeData"
            placeholder="请选择上级类目"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="分类排序">
          <a-input-number v-decorator="['sort', {initialValue: 1}, validatorRules.val ]" placeholder="请输入类目排序" :min="0" :max="99" style="width: 200px" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否启用">
          <a-radio-group v-decorator="['status', {initialValue: 0}, validatorRules.val ]" name="status">
            <a-radio :value="0">关闭</a-radio>
            <a-radio :value="1">启用</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from '@/api/goods/goodsCategory';
import { Slime } from '@/mixins/slime';
import { evaFiltersMixin } from "@/mixins/evaMixin";
export default {
  name: 'goodsCategoryModal',
  mixins: [Slime, evaFiltersMixin],
  data() {
    return {
      title: '编辑',
      form: this.$form.createForm(this),
      model: {},
      validatorRules: {
        val: { rules: [{ required: true, message: '请输入内容!' }] },
      },
      isFirst:0,
      treeData:null,
      id: 0,
    };
  },
  created(){
    this.initPidTree()
  },
  methods: {
    initPidTree(){
      const that = this;
      let param = {
        pid:0
      }
      ApiTree.getTree(param).then((res) => {
        that.treeData = res.result.map((obj, i) => {
          return (obj = {
            title: obj.name,
            value: obj.id,
            key: i+1,
          });
        });
      });
    },
    // 增
    crudCreate() {
      this.crudUpdate({});
    },
    // 改
    crudUpdate(record) {
      this.form.resetFields(); //重新设置领域
      this.visible = true;
      if(!record.id){
        return false
      }
      ApiTree.getDetail(record.id)
        .then((res) => {
          let data = res.result
          this.id = data.id;
          this.form.setFieldsValue({
            name: data.name,
            sort: data.sort,
            status: data.status,
          });
        })
        .finally(() => {
        });
    },
    // 提交
    submit() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let param = values
          if (!that.id) {
            that.submitCreate(param);
          } else {
            param = {...param, id:that.id}
            that.submitUpdate(param);
          }
        }
      });
    },
    // 提交 增
    submitCreate(param) {
      const that = this;
      ApiTree.getAdd(param)
        .then((res) => {
          that.$message.success('新增成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      ApiTree.getUpdate(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.id = null
      this.form.resetFields();
      this.$emit('closeModal');
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>